<template>
  <ul>
    <transition-group enter-active-class="animate__animated  animate__fadeInLeft" leave-active-class="animate__animated animate__fadeOutLeft">
      <router-link v-for="(item, index) in routerStack" :key="item.path" :to="item.path">
        <span>{{ item.title }}</span>
        <i class="iconfont icon-chahao" @click.prevent="remove(index)"></i>
      </router-link>
    </transition-group>
  </ul>
</template>

<script lang="ts" setup>
import { reactive, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
const route = useRoute();
const router = useRouter();
interface Item {
  title: string;
  path: string;
}
let routerStack = reactive<Array<Item>>([]);

const addItem = (v: Item) => {
  if (v.path) {
    let exist = routerStack.some((item) => item.path === v.path);
    if (!exist) {
      routerStack.push(v);
    }
  }
  return;
};
const remove = (index: number) => {
  if (index) {
    routerStack.splice(index, 1);
    let path = routerStack[0].path;
    router.push(path);
  }
};
watch(
  route,
  (newValue) => {
    addItem(newValue.meta as any);
  },
  { immediate: true }
);
</script>

<style lang="less" scoped>
ul {
  display: flex;
  align-items: center;

  a {
    position: relative;
    padding: 10px 20px;
    margin: 0 3px;
    border-radius: 5px;
    color: #fff !important;
    background-color: var(--tabsFill);
    text-decoration: none;
    cursor: pointer;
    animation-duration: 0.3s;

    &:hover i {
      opacity: 1;
    }

    i {
      position: absolute;
      font-size: 18px;
      right: 0px;
      top: 0px;
      opacity: 0;
      transition: all 0.3s;
    }
  }
}
</style>
